<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/mescroll.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/pages/notice/details.css" />
	</head>

	<body>
		<div id="app" class="app">
			<div id="mescroll" class="mescroll">
				<div class="content">
					<header class="m-t-10 title font-c-41" v-text="noticeData.pnTitle || '我是个没得感情的杀手'"></header>
					<div class="desc-content">
						<div class="font-14 font-c-41" v-text="noticeData.neiName"></div>
						<div class="font-14 font-c-7f">{{noticeData.pnCD | timeago}}</div>
					</div>
					<div class="icon-list m-t-10 m-b-20">
						<img src="../../../images/home/notice/yuan.png" v-for="item in [1,2,3]">
					</div>

					<div class="content-body" v-html="noticeData.pnDetails"></div>
				</div>
				<div class="comment">
					<div class="p-t-15 font-14 font-c-7f liuyan">— 精选留言 —</div>
					<ul class="mui-table-view" v-if="messageList.length > 0">
						<li class="mui-table-view-cell item" v-for="item in messageList">
							<div class="img">
								<img :src="item.icon">
							</div>
							<div class="comment-desc">
								<div class="info">
									<span v-text="item.periNickname"></span>
									<span class="font-12 font-c-ad">{{item.mesCD | timeago}}</span>
								</div>
								<div class="text font-14 font-c-7f m-t-10" v-text="item.mesDetails"></div>
							</div>
						</li>
					</ul>
					<div v-else class="p-10 m-t-30 p-t-30 font-12 font-c-7f" style="text-align: center;">还没有人留言呢，快来第一个坐沙发</div>
				</div>
			</div>
			<!-- 输入框 -->  
			<div class="bottom-textarea">
				<textarea id="textarea" class="textarea" v-model="comDetails" placeholder="说点什么吧!"></textarea>
				<div class="send" @click="sendTap">发送</div>
			</div>
		</div>
		<script src="../../../js/Width.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/Util.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
		<script type="text/javascript">
			mui.init()

			var mescroll;

			mui.plusReady(function() {
				if (!mui.os.android) {
					FastClick.attach(document.body);
					plus.webview.currentWebview().setStyle({
						softinputMode: "adjustResize" // 弹出软键盘时自动改变webview的高度
					});
				}
				mescroll = new MeScroll("mescroll", {
					down: {
						callback: GetNoticeDetails //下拉刷新的回调
					}
				});
			})



			function GetNoticeDetails() {

				var pnID = plus.webview.currentWebview().pnID;
				app.pnID = pnID
				mui.post(Util.HTTP + 'api/Home/GetNoticeDetails', {
					pnID: pnID
				}, function(res) {
					if (res.code == 1001) {
						app.noticeData = res.data
						app.messageList = res.data.messageList
						mescroll.endErr();
					} else {
						mui.toast(res.message)
					}
				})
			}

			var app = new Vue({
				el: '#app',
				data: {
					pnID: '',
					noticeData: {},
					messageList: [],
					comDetails: ''
				},
				filters: {
					timeago: function(value) {
						return Util.timeago(value)
					}
				},
				methods: {
					sendTap: function() {
						var that = this
						var comDetails = this.comDetails
						if (!comDetails) {
							mui.toast('请输入内容')
							return
						}
						var pnID = this.pnID
						document.getElementById("textarea").blur(); //焦点，关闭软键盘 
						mui.post(Util.HTTP + 'api/Home/PostMessageBoard', {
							pnID: pnID,
							userID: Util.getState('$state').userID,
							mesDetails: comDetails
						}, function (res) {
							that.comDetails = ''
							if (res.code == 1001) {
								mui.toast('留言成功!')
								GetNoticeDetails()
							} else {
								mui.toast(res.message)
							}
						})
					}
				}
			})
		</script>
	</body>

</html>
